<!-- 设备管理-设备档案管理-设备备件清单备件种类弹窗 -->
<template>
  <px-dialog v-model="visible" class="equip-dialog-wrap" title="备品备件清单" width="1280px" @open="openDialog" @close="closeDialog">
    <div class="equip-dialog-content">
      <px-table :data="tableData" class="equip-table" size="small" height="400" border>
        <px-table-column type="index" label="序号" width="60" align="center" fixed="left" />
        <px-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">
            {{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}
          </template>
        </px-table-column>
      </px-table>
      <div style="margin-top: 16px; text-align: right">
        <px-button @click="closeDialog">取消</px-button>
      </div>
    </div>
  </px-dialog>
</template>
<script setup lang="ts">
import { reactive, toRefs, computed } from "vue";
import { getSpareParts, getSparePartsModelCodesNew } from "@/api/equip/archive";

// 调用父级-关闭弹窗方法
const emits = defineEmits(["closeDialog"]);
// 父级传过来的值
const props = defineProps(["dialogVisible", "id"]);
const visible = computed(() => props.dialogVisible);
// 页面本身的值
const state = reactive<any>({
  tableColumns: [
    { prop: "categoryDesc", label: "种类", minWidth: "140", showOverflowTooltip: true, fixed: "left" },
    { prop: "sparePartName", label: "名称", minWidth: "140", showOverflowTooltip: true },
    { prop: "sparePartCode", label: "编码", minWidth: "140", showOverflowTooltip: true },
    { prop: "typeName", label: "类型", minWidth: "140", showOverflowTooltip: true },
    { prop: "brandName", label: "品牌", minWidth: "140", showOverflowTooltip: true },
    { prop: "supplyModel", label: "厂商型号", minWidth: "140", showOverflowTooltip: true },
    { prop: "model", label: "厂内型号", minWidth: "140", showOverflowTooltip: true },
    { prop: "warehousePositionDesc", label: "库位", minWidth: "140", showOverflowTooltip: true }
  ],
  tableData: []
});
const { tableColumns, tableData } = toRefs(state);

// 打开弹窗
const openDialog = async () => {
  tableData.value = [];
  const data = await getSpareParts(props.id);
  const tempData = data?.sparePartTypeDTOList || [];
  const arr = [];
  if (tempData && tempData.length > 0) {
    tempData.forEach(item => {
      arr.push(item.code);
    });
    const previewTable = await getSparePartsModelCodesNew(arr);
    tableData.value = previewTable || [];
  } else {
    tableData.value = [];
  }
};
// 关闭弹窗
const closeDialog = () => {
  emits("closeDialog");
};
</script>
<style lang="scss" scoped>
@import url("@/views/all/equip/scss/add-dialog.scss");
</style>
